<% var navList = [
    {
        id: 'info',
        name: '基础说明',
        children: [
            {id: 'start', name: '开始使用', url: 'info.html#start'},
            {id: 'module', name: '模块规范', url: 'info.html#module'},
            {id: 'issue', name: '常见问题', url: 'info.html#issue'},
            {id: 'log', name: '更新日志', url: 'info.html#log'}
        ]
    }, {
        id: 'base',
        name: '基础组件',
        children: [
            {id: 'normalize', name: 'Normalize 排版', url: 'base.html#normalize'},
            {id: 'grid', name: 'Grid 栅格系统', url: 'base.html#grid'},
            {id: 'layout', name: 'Layout 布局', url: 'base.html#layout'},
            {id: 'font', name: 'Font 字体图标', url: 'base.html#font'},
            {id: 'color', name: 'Color 主题色彩', url: 'base.html#color'},
            {id: 'button', name: 'Button 按钮', url: 'base.html#button'},
            {id: 'link', name: 'Link 链接', url: 'base.html#link'},
            {id: 'animation', name: 'Animation 动画', url: 'base.html#animation'},
            {id: 'animation', name: 'Loading CSS3 加载', url: 'base.html#loading'},
            {id: 'assist', name: 'Assist 辅助', url: 'base.html#assist'}
        ]
    }, {
        id: 'table',
        name: '表格',
        children: [
            {id: 'base', name: 'Table 基础表格', url: 'table.html#base'},
            {id: 'responsive', name: 'TableResponsive 数据表格', url: 'table.html#responsive'},
            {id: 'data', name: 'DataTable 数据表格', url: 'table.html#data'},
        ]
    }, {
        id: 'form',
        name: '表单组件',
        children: [
            {id: 'input', name: 'Input 输入框', url: 'form.html#input'},
            {id: 'select', name: 'Select 选择框', url: 'form.html#select'},
            {id: 'radio', name: 'Radio 单选框', url: 'form.html#radio'},
            {id: 'checkbox', name: 'Checkbox 多选框', url: 'form.html#checkbox'},
            {id: 'switch', name: 'Switch 开关', url: 'form.html#switch'},
            {id: 'autocomplete', name: 'Autocomplete 自动完成', url: 'form.html#autocomplete'},
            {id: 'slider', name: 'Slider 滑块', url: 'form.html#slider'},
            {id: 'timepicker', name: 'TimePicker 时间选择', url: 'form.html#timepicker'},
            {id: 'rate', name: 'Rate 评分', url: 'form.html#rate'},
            {id: 'colorpicker', name: 'ColorPicker 颜色选择器', url: 'form.html#colorpicker'},
            {id: 'inputnumber', name: 'InputNumber 数字输入框', url: 'form.html#inputnumber'},
            {id: 'cascader', name: 'Cascader 级联选择', url: 'form.html#cascader'},
            {id: 'transfer', name: 'Transfer 穿梭框', url: 'form.html#transfer'},
        ]
    }, {
        id: 'view',
        name: '视图组件',
        children: [
            {id: 'timeline', name: 'Timeline 时间线', url: 'view.html#timeline'},
            {id: 'step', name: 'Step 步骤条', url: 'view.html#step'},
            {id: 'tag', name: 'Tag 标签', url: 'view.html#tag'},
            {id: 'badge', name: 'Badge 徽标数', url: 'view.html#tag'},
            {id: 'alert', name: 'Alert 警告框', url: 'view.html#alert'},
            {id: 'avatar', name: 'Avatar 头像', url: 'view.html#avatar'},
            {id: 'card', name: 'Card 卡片', url: 'view.html#card'},
            {id: 'empty', name: 'Empty 空状态', url: 'view.html#empty'},
            {id: 'list', name: 'List 列表', url: 'view.html#list'},
            {id: 'header', name: 'Header 页头', url: 'view.html#header'},
            {id: 'article', name: 'Article 文章', url: 'view.html#article'},
            {id: 'comment', name: 'Comment 评论', url: 'view.html#comment'},
            {id: 'skeleton', name: 'Skeleton 骨架图', url: 'view.html#skeleton'},
            {id: 'result', name: 'Result 结果页', url: 'view.html#result'},
            {id: 'divider', name: 'Divider 分割线', url: 'view.html#divider'},
            {id: 'progress', name: 'Progress 进度条', url: 'view.html#progress'},
            {id: 'tree', name: 'Tree 树形结构', url: 'view.html#progress'},
            {id: 'popover', name: 'Popover 气泡卡片', url: 'view.html#progress'},
            {id: 'loadingbar', name: 'LoadingBar 加载进度条', url: 'view.html#loadingbar'},
            {id: 'pagination', name: 'Pagination 分页', url: 'view.html#pagination'},
            {id: 'message', name: 'Message 全局提示', url: 'view.html#message'},
            {id: 'notice', name: 'Notice 通知提醒', url: 'view.html#notice'},
            {id: 'dialog', name: 'Dialog 模态框', url: 'view.html#dialog'},
            {id: 'collapse', name: 'Collapse 折叠面板', url: 'view.html#collapse'},
            {id: 'tooltip', name: 'Tooltip 文字提示', url: 'view.html#tooltip'},
            {id: 'poptip', name: 'Poptip 气泡提示', url: 'view.html#poptip'},
            {id: 'carousel', name: 'Carousel 走马灯', url: 'view.html#carousel'}
        ]
    }, {
        id: 'nav',
        name: '导航组件',
        children: [
            {id: 'menu', name: 'Menu 导航菜单', url: 'nav.html#menu'},
            {id: 'dropdown', name: 'Dropdown 下拉菜单', url: 'nav.html#dropdown'},
            {id: 'tab', name: 'Tab 标签页', url: 'nav.html#tab'},
            {id: 'breadcrumb', name: 'Breadcrumb 面包屑', url: 'nav.html#breadcrumb'},
            {id: 'aside', name: 'Aside 左右模态框', url: 'nav.html#aside'}
        ]
    }, {
        id: 'nav',
        name: '操作反馈',
        children: [
            {id: 'menu', name: 'Menu 导航菜单', url: 'nav.html#menu'},
            {id: 'dropdown', name: 'Dropdown 下拉菜单', url: 'nav.html#dropdown'},
            {id: 'tab', name: 'Tab 标签页', url: 'nav.html#tab'},
            {id: 'breadcrumb', name: 'Breadcrumb 面包屑', url: 'nav.html#breadcrumb'},
            {id: 'aside', name: 'Aside 左右模态框', url: 'nav.html#aside'}
        ]
    }, {
        id: 'other',
        name: '其他',
        children: [
            {id: 'anchor', name: 'Anchor 锚点', url: 'other.html#affix'},
            {id: 'affix', name: 'Affix 图钉', url: 'other.html#affix'},
            {id: 'backtop', name: 'BackTop 返回顶部', url: 'other.html#backtop'},
            {id: 'upload', name: 'Upload 文件上传', url: 'other.html#upload'},
            {id: 'validation', name: 'Validation 表单验证', url: 'other.html#validation'},
            {id: 'template', name: 'Template 模版引擎', url: 'other.html#template'},
            {id: 'code', name: 'Code 代码修饰器', url: 'other.html#code'}
        ]
    }
];
var navName = navName || '';
 %>
<ul class="site-nav">
    <% for (var i = 0; i < navList.length; i++) { %>
    <li class="site-nav-item">
        <h3 class="site-nav-title"><%=navList[i].name %></h3>
    </li>
    <% for (var j = 0; j < navList[i].children.length; j++) { %>
    <li class="site-nav-item<%=navList[i].children[j].id == navName ? ' active' : '' %>">
        <a href="/modules/<%=navList[i].children[j].url %>" class="site-nav-link"><%=navList[i].children[j].name %></a>
    </li>
    <% } %>
    <% } %>
</ul>